<template>
  <div>
    <span>{{name}}</span>
    <div :class="type" @drop="drop($event, type)" @dragover="allowDrop" v-if="getChartActive">
      <span v-if="getChartActive != null && getChartActive[type].length <= 0">在此处拖动数据字段</span>
      <span v-else>
        <!-- <div v-for="(value, typeIndex) in getChartActive[type]" :key="typeIndex" class="field-item">
          <span>{{ value.fieldName }}</span>
          <span>
            <span class="pull-down">
              <img @click="moreShow = !moreShow" src="@/assets/image/main/下拉.png" />

              <ul v-show="moreShow" class="moreBox">
                <li
                  v-for="(way, index) in getWayList(typeIndex)"
                  :key="index"
                  @click="setWay(way.value)"
                >
                  <img
                    :class="{ hiden: way.value != cahrtActiveWay }"
                    src="@/assets/image/main/钩.png"
                  />
                  {{ way.label }}
                </li>
              </ul>
            </span>
            <img @click="removeField(type, typeIndex)" src="@/assets/image/main/关闭.png" />
          </span>
        </div> -->
        <visual-field v-for="(value, typeIndex) in getChartActive[type]" :key="typeIndex" class="field-item"
          :value="value"
          :typeIndex="typeIndex"
          :getChartActive="getChartActive"
          :type="type"
          v-on:set-way="setWay"
          v-on:remove-field="removeField"
        >
        </visual-field>
      </span>
    </div>
  </div>
</template>

<script>
import VisualField from "@/components/visual/VisualField.vue"
export default {
  props: ["name", "getChartActive", "type"],
  components:{
    VisualField
  },
  computed: {
    getWayList() {
      return function (index) {
        let valueSheetName = this.getChartActive.value[0].sheetName;
        let valueFieldName = this.getChartActive.value[index].fieldName;
        let fieldType = this.getFeildType(valueSheetName, valueFieldName);

        return this.checkFieldType(fieldType);
      };
    },
    cahrtActiveWay() {
      return this.getChartActive.way;
    },
  },
  data() {
    return {
      moreShow: false,
    };
  },
  methods: {
    setWay(index, value) {
      this.$emit("set-way", index, value);
    },
    drop(e, type) {
      this.$emit("drop", e, type);
    },
    allowDrop(e) {
      this.$emit("allow-drop", e);
    },
    getFeildType(sheetName, fieldName) {
      let loadSheetList = this.$store.state.loadSheet.loadSheetList;
      let types = [];
      let columns = [];
      for (let loadSheet of loadSheetList) {
        if (loadSheet.showName == sheetName) {
          types = loadSheet.types;
          columns = loadSheet.columns;
        }
      }

      for (let i = 0; i < columns.length; i++) {
        if (columns[i] == fieldName) {
          return types[i];
        }
      }

      return null;
    },
    checkFieldType(type) {
      if (type == "object" || type == 'category') {
        let wayList =  [
          {
            label: "计数",
            value: "count",
          },
          {
            label: "计数（非重复）",
            value: "countNR",
          },
        ];
        this.wayActive = "count";
        this.wayList = wayList

        return wayList
      } else {
        this.wayActive = "sum";

        this.wayList = [
          {
            label: "求和",
            value: "sum",
          },
          {
            label: "平均值",
            value: "mean",
          },
          {
            label: "最小值",
            value: "min",
          },
          {
            label: "最大值",
            value: "max",
          },
          {
            label: "计数（非重复）",
            value: "countNR",
          },
          {
            label: "计数",
            value: "count",
          },
          {
            label: "标准方差",
            value: "std",
          },
          {
            label: "方差",
            value: "var",
          },
        ];

        return this.wayList
      }
    },
    removeField(type, index){
        this.$emit('remove-field', type, index)
    }
  },
};
</script>

<style scoped>
.axis,
.value {
  border: 1px gray;
  border-style: dashed;

  padding: 5px;
  margin-bottom: 15px;
}




</style>